import 'package:flutter/material.dart';
import 'package:flutter_swiper/flutter_swiper.dart';
import 'package:xlsk/api/model/student.dart';
import 'package:xlsk/components/empty.dart';
import 'package:xlsk/components/tabswiper.dart';
import 'package:xlsk/routes/xlsk_router.dart';
import 'package:xlsk/utils/dimension.dart';

class StudentInfo extends StatefulWidget {
  var id;
  StudentInfo({this.id});

  @override
  State<StatefulWidget> createState() {
    return _infoState();
  }
}

class _infoState extends State<StudentInfo> {
  late SwiperController _controller;
  double Dx = 0;
  int current = 0;
  Map<String,dynamic> studentView = {
    'age':0,
    'birthdate':'',
    'family':[],
    'headimg':'https://api.xiaoluerp.com/Uploads/images/headimg.png',
    'name':'',
    'phone':'',
    'sex':1,
    'status':1
  };
  List kecheng = [];

  @override
  void initState() {
    super.initState();
    _controller = new SwiperController();
    getStudentView();
    getKecheng();
  }

  @override
  Widget build(BuildContext context) {
    // print(widget.id);
    return Scaffold(
      appBar: AppBar(
        title: Text("学员信息",style: TextStyle(color: Color(0xFF1F2329),fontSize: Dimension(context).toPx(17),fontWeight: FontWeight.bold)),
        leading: GestureDetector(
          child: Icon(Icons.arrow_back_ios,color: Color.fromRGBO(31, 35, 41, 1),size: 24,),
          onTap: (){
            XlskRouter.back(context);
          },
        ),
        centerTitle: true,
        backgroundColor: Colors.white,
        elevation: 0,
      ),
      body: Column(
        children: [
          Container(
            width: Dimension(context).toVw(100),
            padding: EdgeInsets.all(Dimension(context).toPx(32)),
            color: Colors.white,
            child: Row(
              mainAxisAlignment: MainAxisAlignment.spaceBetween,
              children: [
                Column(
                  crossAxisAlignment: CrossAxisAlignment.start,
                  children: [
                    Text('${studentView['name']}',style: TextStyle(fontSize: Dimension(context).toPx(20),fontWeight: FontWeight.w700,color: Color(0xff1f2329))),
                    Container(
                      width: Dimension(context).toPx(102),
                      margin: EdgeInsets.only(top: Dimension(context).toPx(8)),
                      child: Row(
                        mainAxisAlignment: MainAxisAlignment.spaceBetween,
                        children: [
                          Text('${studentView['status']=='1'?'在读学员':'历史学员'}',style: TextStyle(fontSize: Dimension(context).toPx(13),color: Color(0xff777c84))),
                          Text('|',style: TextStyle(fontSize: Dimension(context).toPx(13),color: Color(0xff777c84))),
                          Text('${studentView['age']}岁',style: TextStyle(fontSize: Dimension(context).toPx(13),color: Color(0xff777c84))),
                        ],
                      ),
                    ),
                  ],
                ),
                Container(
                  width: Dimension(context).toPx(56),
                  height: Dimension(context).toPx(56),
                  decoration: BoxDecoration(
                    image: DecorationImage(
                      image: NetworkImage('${studentView['headimg']}'),
                      fit: BoxFit.cover,
                    ),
                    borderRadius: BorderRadius.all(Radius.circular(Dimension(context).toPx(28)))
                  ),
                )
              ],
            ),
          ),
          TabSwiper(
            width: Dimension(context).toVw(100),
            swiperWidth:Dimension(context).toVw(100),
            dx:Dx,
            current:current,
            onClick: (idx){
              _controller.move(idx);
            },
            list: [
              {'title':'学生信息','color':0xff303133},
              {'title':'报读课程','color':0xff303133},
            ],
          ),
          Expanded(
            child: Container(
              width: Dimension(context).toVw(100),
              child: NotificationListener<ScrollNotification>(
                onNotification: (ScrollNotification notification){
                  // 监听滑动过程
                  ScrollMetrics metrics = notification.metrics;
                  setState(() {
                    if(metrics.axis == Axis.horizontal){
                      Dx = metrics.pixels;
                    }
                  });
                  // print('${metrics.pixels},${metrics.axis}');
                  return true;
                },
                child: NotificationListener<ScrollEndNotification>(
                  onNotification: (endNotification){
                    // 监听滑动结束
                    return false;
                  },
                  child: Swiper(
                    itemCount: 2,
                    controller: _controller,
                    loop: false,
                    autoplay: false,
                    scrollDirection: Axis.horizontal,
                    onTap:(index){
                      print(index);
                    },
                    itemBuilder: (BuildContext context,int index){
                      return Container(
                        width: Dimension(context).toVw(100),
                        padding: EdgeInsets.all(Dimension(context).toPx(16)),
                        child: ListView(
                          children: [
                            swiperItem(index),
                          ],
                        ),
                      );
                    },
                  ),
                ),
              ),
            ),
          ),
        ],
      ),
    );
  }

  swiperItem(index){
    switch(index){
      case 0:
        return renderItem1();
        break;
      case 1:
        return renderItem2();
        break;
    }
  }

  void getStudentView() async{
    Map<String, dynamic> data = {
      'id':widget.id,
    };
    var res = await StudentApi().getStudentView(context,data);
    setState(() {
      studentView = res;
    });
  }

  Widget renderItem1(){
    List<Widget> view = [];
    num text_width = 58;
    view = [
      Container(
        margin: EdgeInsets.only(top: Dimension(context).toPx(12)),
        child: Row(
          children: [
            Container(
              width: Dimension(context).toPx(text_width),
              margin:  EdgeInsets.only(right: Dimension(context).toPx(24)),
              child: Text('生日',style: TextStyle(color: Color(0xff646a73),fontSize: Dimension(context).toPx(14))),
            ),
            Text('${studentView['birthdate']}',style: TextStyle(color: Color(0xff1f2329),fontSize: Dimension(context).toPx(14)))
          ],
        ),
      ),
      Container(
        margin: EdgeInsets.only(top: Dimension(context).toPx(12)),
        child: Row(
          children: [
            Container(
              width: Dimension(context).toPx(text_width),
              margin:  EdgeInsets.only(right: Dimension(context).toPx(24)),
              child: Text('性别',style: TextStyle(color: Color(0xff646a73),fontSize: Dimension(context).toPx(14))),
            ),
            Text('${studentView['sex']=='1'?'男':'女'}',style: TextStyle(color: Color(0xff1f2329),fontSize: Dimension(context).toPx(14)))
          ],
        ),
      ),
      Container(
        margin: EdgeInsets.only(top: Dimension(context).toPx(12)),
        child: Row(
          children: [
            Container(
              width: Dimension(context).toPx(text_width),
              margin:  EdgeInsets.only(right: Dimension(context).toPx(24)),
              child: Text('联系方式',style: TextStyle(color: Color(0xff646a73),fontSize: Dimension(context).toPx(14))),
            ),
            Text('${studentView['phone']}',style: TextStyle(color: Color(0xff1f2329),fontSize: Dimension(context).toPx(14)))
          ],
        ),
      ),
    ];
    for(var item in studentView['family']){
      view.add(Container(
        margin: EdgeInsets.only(top: Dimension(context).toPx(12)),
        child: Row(
          children: [
            Container(
              width: Dimension(context).toPx(text_width),
              margin:  EdgeInsets.only(right: Dimension(context).toPx(24)),
              child: Text('${item['qsgx']}',style: TextStyle(color: Color(0xff646a73),fontSize: Dimension(context).toPx(14))),
            ),
            Text('${item['name']} ${item['mobile']}',style: TextStyle(color: Color(0xff1f2329),fontSize: Dimension(context).toPx(14)))
          ],
        ),
      ));
    }

    return Column(
      children: [
        Container(
          width: Dimension(context).toPx(343),
          padding: EdgeInsets.all(Dimension(context).toPx(16)),
          decoration: BoxDecoration(
            color: Colors.white,
            borderRadius: BorderRadius.all(Radius.circular(Dimension(context).toPx(12)))
          ),
          child: Column(
            crossAxisAlignment: CrossAxisAlignment.start,
            children: [
              Container(
                alignment: Alignment.centerLeft,
                decoration: BoxDecoration(
                  border: Border(
                    bottom: BorderSide(
                      color: Color(0xffebedf0),
                      width: 1,
                      style: BorderStyle.solid,
                    )
                  )
                ),
                padding: EdgeInsets.only(bottom: Dimension(context).toPx(12)),
                child: Text('基础信息',style: TextStyle(color: Color(0xff1f2329),fontSize: Dimension(context).toPx(16),fontWeight: FontWeight.w700)),
              ),
              Column(
                crossAxisAlignment: CrossAxisAlignment.start,
                children: view,
              )
            ],
          ),
        )
      ],
    );
  }

  void getKecheng() async{
    Map<String, dynamic> data = {
      'id':widget.id,
    };
    var res = await StudentApi().getKecheng(context,data);
    setState(() {
      kecheng = res;
    });
  }

  Widget renderItem2(){
    List<Widget> view = [];
    num text_width = 58;

    for(var item in kecheng){
      view.add(Container(
        width: Dimension(context).toPx(343),
        margin: EdgeInsets.only(bottom: Dimension(context).toPx(16)),
        padding: EdgeInsets.all(Dimension(context).toPx(16)),
        decoration: BoxDecoration(
            color: Colors.white,
            borderRadius: BorderRadius.all(Radius.circular(Dimension(context).toPx(12)))
        ),
        child: Column(
          crossAxisAlignment: CrossAxisAlignment.start,
          children: [
            Container(
              alignment: Alignment.centerLeft,
              decoration: BoxDecoration(
                  border: Border(
                      bottom: BorderSide(
                        color: Color(0xffebedf0),
                        width: 1,
                        style: BorderStyle.solid,
                      )
                  )
              ),
              padding: EdgeInsets.only(bottom: Dimension(context).toPx(12)),
              child: Text('${item['name']}',style: TextStyle(color: Color(0xff1f2329),fontSize: Dimension(context).toPx(16),fontWeight: FontWeight.w700)),
            ),
            Column(
              crossAxisAlignment: CrossAxisAlignment.start,
              children: [
                Container(
                  margin: EdgeInsets.only(top: Dimension(context).toPx(12)),
                  child: Row(
                    children: [
                      Container(
                        width: Dimension(context).toPx(text_width),
                        margin:  EdgeInsets.only(right: Dimension(context).toPx(24)),
                        child: Text('班级',style: TextStyle(color: Color(0xff646a73),fontSize: Dimension(context).toPx(14))),
                      ),
                      Expanded(
                        child: Text('${item['bj_name']}',style: TextStyle(color: Color(0xff1f2329),fontSize: Dimension(context).toPx(14)),maxLines: 999),
                      )
                    ],
                  ),
                ),
                Container(
                  margin: EdgeInsets.only(top: Dimension(context).toPx(12)),
                  child: Row(
                    children: [
                      Container(
                        width: Dimension(context).toPx(text_width),
                        margin:  EdgeInsets.only(right: Dimension(context).toPx(24)),
                        child: Text('剩余课时',style: TextStyle(color: Color(0xff646a73),fontSize: Dimension(context).toPx(14))),
                      ),
                      Expanded(
                        child: Text('${item['left_lession']['left_lession']}',style: TextStyle(color: Color(0xff1f2329),fontSize: Dimension(context).toPx(14)),maxLines: 999),
                      )
                    ],
                  ),
                ),
                Container(
                  margin: EdgeInsets.only(top: Dimension(context).toPx(12)),
                  child: Row(
                    children: [
                      Container(
                        width: Dimension(context).toPx(text_width),
                        margin:  EdgeInsets.only(right: Dimension(context).toPx(24)),
                        child: Text('剩余天数',style: TextStyle(color: Color(0xff646a73),fontSize: Dimension(context).toPx(14))),
                      ),
                      Text('${item['left_lession']['left_lession']}',style: TextStyle(color: Color(0xff1f2329),fontSize: Dimension(context).toPx(14)))
                    ],
                  ),
                ),
              ],
            )
          ],
        ),
      ));
    }

    return Column(
      children: kecheng.length>0?view:[Empty('暂无课程')],
    );
  }

  @override
  void dispose() {
    super.dispose();
  }
}
